<template>
	<view class="footprints-view">
		<view class="top-search">
			<u-search v-model="searchValue" :show-action="false" :placeholder="$t('searchResult.search')" @change="goSearch" 
				height="37">
			</u-search>
		</view>

		<view class="content">
			<u-list @scrolltolower="scrolltolower">
				<u-swipe-action>
					<u-swipe-action-item @click="handleDel" :name="item.id" :options="options1" v-if="item.morebagPublishPictures"
						v-for="(item, index) in orderlist" :key="item.id">
						<u-list-item>
							<view class="goods-item" @tap="goCommodity(item)" v-if="item.morebagPublishPictures">
								<image :src="item.morebagPublishPictures?item.morebagPublishPictures[0].picture:''"
									mode="aspectFit"></image>

								<view class="goods-desc">
									<view class="goods-name">
										{{$t("goodsReleased.language") == "zh"?item.commodity:item.commodityEn}}
									</view>
									<view class="goods-price">
										$ {{String(item.money).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}}
									</view>
									<view class="goods-count">
										<view class="">
											<!-- {{$t("footPrint.lowPrice")}} -->
										</view>
										<view class="back">
											{{item.status==1?$t('common.noSold'):$t('common.sold')}}
										</view>
									</view>
								</view>
							</view>
						</u-list-item>
					</u-swipe-action-item>
				</u-swipe-action>

			</u-list>
		</view>
	</view>
</template>

<script>
	import search from "../../components/search"
	import {
		getFootPrints,
		delFootPrints
	} from "@/common/api.js"

	export default {
		components: {
			search
		},
		data() {
			return {
				searchValue:"",
				indexList: [],
				orderlist:[],
				options1: [{
					text: this.$t("cart.del"),
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				pageNum: 1,
				pageSize: 10,
				finished: false
			}
		},
		methods: {
			// 删除足迹
			async handleDel(obj) {
				// console.log(obj);
				const res = await delFootPrints(obj.name, uni.getStorageSync("userId"));
				console.log(res);
				if(res.code == 200) {
					uni.redirectTo({
						url:"/pages/footprints/footprints"
					})
				}
			},
			goCommodity(item) {
				uni.navigateTo({
					url: `/pages/commodityDetails/commodityDetails?id=${item.id}`
				})
			},
			scrolltolower() {
				console.log("到达底部");
				this.initData();
			},
			async initData() {
				if(this.finished) {
					return
				}
				const res = await getFootPrints({
					pageSize: this.pageSize,
					pageNum: this.pageNum
				});
				console.log(res);
				if(res.code == 200) {
					if(res.rows.length < this.pageSize) {
						this.finished = true;
					}
					this.pageNum++;
					this.indexList = [...this.indexList, ...res.rows];
				}
				this.orderlist = this.indexList
			},
			goSearch(value) {
				this.searchValue = value
			},
		},
		onLoad() {
			this.initData();
		},
		watch:{
			searchValue(oldValue,newValue){
				console.log(oldValue,newValue);
				if(this.searchValue === ''){
					this.orderlist = this.indexList
				}else{
					this.orderlist = []
					for(const item of this.indexList){
						if(item.commodity.includes(this.searchValue)){
							this.orderlist.push(item)
						}
					}
				}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("footPrint.title")
			});
		}
	}
</script>

<style lang="scss" scoped>
	.u-swipe-action-item {
		margin: 20rpx 0;
	}
	
	.back {
		background-color: #000;
		color: #fff;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 700;
		font-size: 18rpx;
		margin-right: 10rpx;
		padding: 5rpx 10rpx;
	}
	
	.footprints-view {
		// position: absolute;
		// // top: 102rpx;
		// width: 100%;
		// height: 100%;
		// background-color: #FBFBFB;
		// z-index: -1;

		.top-search {
			padding: 14rpx 22rpx;
			background-color: #fff;
		}

		.content {
			.goods-item {
				display: flex;
				align-items: center;
				margin: 20rpx 42rpx;

				image {
					width: 310rpx;
					height: 220rpx;
					border-radius: 20rpx;
				}

				.goods-desc {
					flex: 1;
					height: 220rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 18rpx;

					.goods-name {
						width: 350rpx;
						// overflow: hidden;
						// text-overflow: ellipsis;
						// white-space: nowrap;
						
						overflow:hidden; 
						text-overflow:ellipsis;
						display:-webkit-box; 
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2; 
						
						color: #000000;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
					}

					.goods-price {
						color: #FF0000;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
					}

					.goods-count {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #858585;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>
